<template>
  <div>
    <!-- 头部-->
    <home-header></home-header>
    <!-- 搜索区-->
    <div class="container">
      <div class="search" style="margin-top: 15px;">
        <div class="search-box ">
          <!-- 搜索-->
          <el-input placeholder="请输入期待的岗位" v-model=" searchName == '' ? '' : searchName"
                    prefix-icon="" class="input-with-select">
            <template slot="prepend">
              <div @click="dialogTableVisible = true" class="city">
                <span>{{ cityName }}</span>&nbsp;
                <i class="el-icon-caret-bottom"></i>
              </div>
            </template>
            <el-button class="btn" slot="append">搜索s</el-button>
          </el-input>
          <div class="search-word">
            <div><span>相关搜索：</span></div>
            <ul class="ul_row" v-model="searchWord">
              <li v-for="(item,index) in searchWord" :key="index">
                <span style="margin-right: 16px" @click="selectWord(item.word )">{{ item.word }}</span>
              </li>
            </ul>
          </div>
          <el-dialog width="50%"  title="切换城市" :visible.sync="dialogTableVisible">
            <get-city @change="cityNameChange"></get-city>
          </el-dialog>
        </div>
        <!-- 排序方式-->
        <div class="fast-filter-wrap">
          <div class="fast-filter-wrap__item">
            <div>排序方式：</div>
            <div style="margin-top: 20px">
              <el-radio-group v-model="radioGroupValue" size="mini">
                <el-radio-button label="1">默认</el-radio-button>&nbsp;
                <el-radio-button label="2">最新</el-radio-button>
              </el-radio-group>
            </div>
            <div class="fast-filter-wrap__item" style="margin-left: 20px">
              <div>日新：</div>
              <div style="margin-top: 20px">
                <el-select v-model="salaryValue" placeholder="请选择" size="mini">
                  <el-option
                    v-for="item in salaryArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="fast-filter-wrap__item">
              <div>发布时间：</div>
              <div style="margin-top: 20px">
                <template>
                  <el-select v-model="releaseValue" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in releaseTime"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </div>
            <span @click="onClear" >清空</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bg_line"></div>
    <!-- 内容列-->
    <div class="resultarea">
      <div class="result-list">
        <!-- 内容 项-->
        <div class="primary-content">
          <div v-for="n in 3" class="intern-wrap interns-point intern-item" >
            <div class="clearfix intern-detail" >
              <div class="f-l intern-detail__job" >
                <p ><a
                href="https://www.shixiseng.com/intern/inn_nkhmkvtzbpkt?pcm=pc_SearchList"
                title="&amp;#xf367&amp;#xe3a5 &amp;#xe590&amp;#xe40e&amp;#xed2a&amp;#xe547&amp;#xee24&amp;#xe40e（员&amp;#xf0ed关系方向）"
                target="_blank" class="title ellipsis font" >HR Inter（员关系方向）</a> <!----> <span
                class="day font" >120/天</span> <!---->
                </p>
                <p class="tip" >
                  <span class="city ellipsis" >上海</span>
                  <span>|</span>
                  <span class="font" >4天/周</span>
                  <span >|</span>
                  <span class="font" >3个月</span>
                </p>
              </div>
              <div class="f-r intern-detail__company" >
                <p >
                  <a title="罗德传播集团" href="javascript:;" class="title ellipsis">罗德传播集团</a>
                  <img src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-best-employer.bec47e0.png"
                       title="最佳雇主" class="company__label" style="display:;" >
                  <img src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png"
                       title="行业认证" class="company__label" style="display:none;" >
                </p>
                <p class="tip">
                  <span class="ellipsis" >广告/传媒/公关/展览</span>
                  <span>/</span>
                  <span class="font" >500-2000人</span>
                </p>
                <a href="javascript:;" >
                  <img src="https://sxsimg.xiaoyuanzhao.com/company_log/2021-09-07/20523c520fcf11ec8aaef6ecfe74f268.png" alt=""
                  class="company" >
                </a>
              </div>
            </div>
            <div class="clearfix advantage-wrap tip" >
              <div class="f-l" >
                <span title="4A" class="intern-label" >4A</span>
                <span
                title="五百强" class="intern-label" >五百强</span>
                <span title="美资外企" class="intern-label">美资外企</span>
                <span title="接受大一大二" class="intern-label" >接受大一大二</span>
                <span title="留学生实习" class="intern-label" >留学生实习</span>
              </div>
              <div class="f-r ellipsis" >
                <span title="整合营销，传播咨询，培养新人，外资集团，客户资源丰富，提升空间大" class="company-label" >
                  整合营销，传播咨询，培养新人，外资集团，客户资源丰富，提升空间大
                </span>
              </div>
            </div>
          </div>
          <!-- 分页-->
          <div style="margin: 20px auto">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </div>
        <!--推荐职位-->
        <div style="display: none" class="other-content">
          <div  class="other-content__info">
            <h6 >推荐职位</h6>
            <ul >
              <li v-for="n in 3" class="viewed-list ss_tjzw">
                <a href="https://www.shixiseng.com/intern/inn_axvzbtb9j6jk" target="_blank" class="clearfix">
                  <img  src="https://sxsimg.xiaoyuanzhao.com/A4/AE/A4CBB0FAB284FCEE32DBF60DF8AD17AE.png" alt="" class="f-l">
                  <div  class="f-l middle">
                    <p  class="intern-name ellipsis">品牌部实习生</p>
                    <p  class="company-name ellipsis">麦田公关</p>
                  </div>
                  <div class="f-r salary">薪资面议</div>
                </a>
              </li>
            </ul>
          </div>
          <div class="recommend" >
            <a v-for="n in 3"  style="cursor: pointer;">
              <img  src="https://sxsimg.xiaoyuanzhao.com/adservice/image/20230910222018zPlA8gP0wjkIiyqnSp.jpg" alt="昇维旭">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!--底部-->
    <foot></foot>
  </div>
</template>

<script>
/* eslint-disable  */
import HomeHeader from '@/views/components/common/home-header'
import foot from '@/views/components/foot/foot'
import getCity from '@/views/components/common/get-city'

export default {
  name: 'interns',
  components: {
    getCity,
    foot,
    HomeHeader
  },
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: '',
      radioGroupValue: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      salaryValue: '',
      releaseValue: '',
      salaryArr: [
        {
          value: '',
          label: '不限'
        },
        {
          value: '99',
          label: '100以下'
        },
        {
          value: '100',
          label: '100-150'
        },
        {
          value: '150',
          label: '150-200'
        },
        {
          value: '200',
          label: '200-300'
        },
        {
          value: '300',
          label: '300以上'
        }
      ],
      releaseTime: [
        {
          value: '',
          label: '不限'
        },
        {
          value: '99',
          label: '100以下'
        },
        {
          value: '100',
          label: '100-150'
        },
        {
          value: '150',
          label: '150-200'
        },
        {
          value: '200',
          label: '200-300'
        },
        {
          value: '300',
          label: '300以上'
        }
      ],
      searchWord: [
        { id: '1', word: 'php开发实习生' },
        { id: '2', word: 'web前端' },
        { id: '3', word: 'python实习' },
        { id: '4', word: 'java开发实习生' },
        { id: '5', word: '爬虫工程师' }
      ],
      cityName: '全国',
      searchName:'',
      cityValue: ''
    }
  },
  created () {
    // console.log('排序：', this.radioGroupValue)
    this.fetchData()
  },
  watch: {
    // console.log('rouute：',this.$route.params.searchName)
    // radioGroupValue() {
    //   console.log('排序：',this.radioGroupValue)
    // }
  },
  // mounted () {
    // window.onbeforeunload = e =>{
    //   return ''
    // };
  // },
  methods: {
    beforeunloadFn(e) {
      this.searchName = ''
      console.log('刷新或关闭')
    },
    // 页面传值
    fetchData(){
      const forData = this.$route.query
      this.searchName  = forData.searchName
      console.log('forData：',forData)
    },
    selectWord(name){
      this.searchName  =name
    },
    onClear() {
      this.salaryValue =''
      this.releaseValue = ''
    },
    // 获取切换城市
    cityNameChange(e) {
      // console.log('获取切换城市: ',e)
      this.cityName=''
      this.cityName = e.cname
      this.dialogTableVisible=false
    }
  }
}

</script>

<style scoped>
.search-box >>> .el-input-group__prepend,
.search-box >>> .el-input-group__append {
  border-radius: 0 !important;
  padding: 0;
  /* margin: 0 80px; */
  background-color: #fff;
}

.search-box {
  /* padding-bottom: 24px; */
  /* background-color: #fff; */
  /* box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.04); */
}

.search-box >>> .el-input__suffix {
  display: none;
}

.bg_line {
  height: 6px;
  background-color: #fff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
}

.input-with-select .el-input-group__prepend {
  background-color: unset;
}

.search-box .ul_row {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
  color: #6AA2E4;
  cursor: pointer;
}

.search .search-word {
  display: flex;
  margin-top: 12px;
  background-color: #f8f8fa;
}

.search .search-word > div {
  color: #a0a0a2;
  padding: 0 16px;
}

.search-box >>> .city {
  padding: 0 26px;
  height: 38px;
  line-height: 38px;
  width: 100px !important;
  cursor: pointer;
}
.search-box>>>.el-input-group__append{
  color: #fff;
  background: #6aa2e4;
  /* width: 90px; */
  /* text-align: center; */
}
.el-dialog__header {
  padding: 19px 20px 1px;
}
.el-dialog__body {
  padding: 20px 20px;
  /* width: 800px; */
  border: #42b983 1px solid!important;
}
.search-box >>> .el-input-group__append .el-button {
  margin: 0 40px;
}

.search .fast-filter-wrap {
  display: flex;
  margin-top: 39px;
  padding: 11px 16px;
  background-color: #f8f8fa;
  border: 1px solid #e8e8ea;
  border-radius: 2px;
  /* font-size: 0; */
  /* min-height: 90px; */
  position: relative;
}

.search .fast-filter-wrap__item {
  margin-right: 32px;
  display: flex;
  align-items: baseline;
}

.search .fast-filter-wrap span {
  font-size: 15px;
  color: #a0a0a2;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 33px;
}

/* 内容列卡 */
.result-list {
  width: 1080px;
  margin: 16px auto 0;

  display: flex;
  justify-content: space-between;
}
.primary-content{
  width: 800px;
}
.result-list .intern-wrap {
  display: block;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #E8E8EA;
  line-height: 17px;
  position: relative;
  margin-bottom: 15px;
}
.intern-wrap img {
  height: 18px;
}
img {
  border: none;
  vertical-align: middle;
}
.clearfix {
  zoom: 1;
}
.result-list .intern-wrap .clearfix{
  margin: 23px 31px 0;
  padding-bottom: 25px;
}
.result-list .intern-wrap .intern-detail__job {
  width: 50%;
}

.intern-wrap .intern-detail__job .day {
  margin-left: 5px;
  font-size: 16px;
  color: #FD8150;
  vertical-align: middle;
}
.f-l {
  float: left;
}

.intern-wrap .intern-detail__job .title {
  display: inline-block;
  max-width: 220px;
  vertical-align: middle;
  font-size: 17px;
  color: #252527;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font{
  font-family: myFont;
}
.result-list .intern-wrap .intern-detail__company .company {
  position: absolute;
  top: 17px;
  right: 30px;
  width: 71px;
  height: 71px;
  border: 1px solid #E8E8EA;
}
.intern-wrap .intern-detail__company .title{
  display: inline-block;
  max-width: 150px;
  vertical-align: middle;
  font-size: 17px;
  color: #6AA2E4;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-list .intern-wrap .advantage-wrap{
  padding: 10px 0;
  margin: 0 31px;
  height: 44px;
  border-top: 1px dashed #E8E8EA;
  overflow: hidden;
  box-sizing: border-box;
}
.intern-wrap .intern-detail .tip{
  padding-top: 19px;
}

.intern-wrap .tip {
  font-size: 14px;
  color: #A0A0A2;
}
.intern-wrap .advantage-wrap {
  padding: 10px 0;
  margin: 0 31px;
  height: 44px;
  border-top: 1px dashed #E8E8EA;
  overflow: hidden;
  box-sizing: border-box;
}
.intern-wrap .advantage-wrap .f-l,
.intern-wrap .advantage-wrap .f-r
{
  width: 50%;
}
.f-l {
  float: left;
}

.intern-wrap .advantage-wrap span:not(:last-child) {
  margin-right: 10px;
}

.intern-wrap .advantage-wrap .intern-label{
  max-width: 90px;
  padding: 2px 12px;
  background-color: #F8F8FA;
  border-radius: 12px;
}
.intern-wrap .advantage-wrap span {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 推荐职位 */
.resultarea{
}
.result-list * {
  margin: 0;
  padding: 0;
}
.other-content{
  width: 236px;
  /* border: 1px #ddd solid; */
}
.other-content .other-content__info {
  padding: 16px 10px;
  background-color: #fff;
  border-radius: 4px;
  /* position: relative; */
}
.other-content  ul, li {
  list-style: none;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.other-content .other-content__info h6 {
  padding: 8px 0 12px;
  font-size: 16px;
  font-weight: initial;
  color: #252527;
}
.other-content .other-content__info .viewed-list:not(:last-child) {
  margin-bottom: 8px;
}
.other-content .other-content__info .viewed-list {
  padding: 8px;
  height: 64px;
  background-color: #f8f8fa;
  box-sizing: border-box;
  font-size: 14px;
}
.other-content .viewed-list a {
  display: block;
}
.other-content .viewed-list img {
  margin-right: 8px;
  width: 48px;
  height: 48px;
  border: 1px solid #e8e8ea;
}
.other-content .viewed-list .intern-name{
  padding: 2px 0 5px;
  color: #252527;
}
.other-content .viewed-list .middle {
  max-width: 70px;
}
.other-content .viewed-list .salary{
  max-width: 78px;
  padding-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fd8150;
  transform: translateX(20px);
}
.other-content .viewed-list .company-name{
  color: #6AA2E4;
}
.other-content .recommend a {
  display: block;
}
.other-content .recommend img{
  margin-top: 16px;
  width: 100%;
}





</style>
